<template>
    <LogReg v-if="$store.state.loginView"></LogReg>
        <div class="video-container">
        <!-- 左侧 -->
        <div class="left-container">
            <div class="viewbox-report">
                <h1 class="video-title">{{ detailList.title }}</h1>
                <div class="video-data">
                    <Icon type="ios-arrow-dropright" size="16"/><span class="item">{{ detailList.viewsChange }}</span>
                    <Icon type="ios-barcode-outline" size="16"/><span class="item">{{ detailList.commentsChange }}</span>
                    <Icon type="ios-time-outline" size="16"/><span class="item">{{ detailList.createdAt }}</span>
                    <Icon type="ios-alert-outline" size="16" color="red"/><span class="item">未经作者授权，禁止转载</span>
                </div>
            </div>
            <video preload="none" :poster=$store.state.constant.base_url+detailList.img width="668" height="376" controls="controls" src="http://vali-g1.cp31.ott.cibntv.net/youku/697446c85e14171c789dd2e19/030008010063EEE4E2010BE212B6CF96302AC3-4F0C-4E1C-85EC-C1951BACD94D.mp4?sid=167929725600010003194_00_B18920f2dde5e01b66b0d894b111478cb&sign=1ac94b68c382fdc16544442e8a85dd94&ctype=50&si=183&psid=85ac4a01039bd75c1105687b9bec8c1b41346"></video>
            <div class="arc_toolbar_report">
                <div class="toolbar-left">
                    <div class="toolbar-span blue" :class="[isLike?'choose':'none-choose']" @click="changeLike"><Icon type="md-thumbs-up" size="30"/>{{ detailList.likesChange }}</div>
                    <div class="toolbar-span blue"><Icon type="logo-yen" size="25"/>{{ detailList.coinsChange }}</div>
                    <div class="toolbar-span blue"><Icon type="md-star" size="33"/>{{ detailList. starsChange}}</div>
                    <div class="toolbar-span blue"><Icon type="ios-share-alt" size="33"/>{{ detailList.sharesChange }}</div>
                </div>
                <div class="toolbar-right">
                    <div class="toolbar-span blue"><Icon type="ios-alert-outline" size="20"/>&nbsp;稿件投诉</div>
                    <div class="toolbar-span blue"><Icon type="ios-bookmarks-outline" size="20"/>&nbsp;记笔记</div>
                </div>
            </div>
            <div class="introduction-container">
                <div v-if="!showClose" class="desc-info-text" ref="icontainer">{{detailList.introduction}}</div>
                <div v-else>
                    <div class="desc-info-text" ref="icontainer" :class="[isClose?'introduction-close':'introduction-open']">{{detailList.introduction}}</div>
                    <span class="blue" style="cursor: pointer;" @click="changeClose">{{ closeMsg }}</span>
                </div>

                <!-- <span @click="valueClose">test</span> -->
            </div>
            <div class="b-img">
                <img width="668" src="https://images.weserv.nl/?url=//i0.hdslb.com/bfs/sycp/creative_img/202303/d8f5f24cc1bff5ed317cbae55361d23f.jpg@!web-video.webp" alt="">
            </div>
            <div class="conmment-container">
                <div class="reply-header">
                    <span class="nav-title-text">评论</span>
                    <span class="total-reply">{{ detailList.commentsChange }}</span>
                </div>
                <div class="reply-wrap">
                    <div class="main-reply-box">
                        <div class="reply-box-avatar">
                            <div v-if="!$store.state.isLogin" class="bili-avatar"  style="width: 40px;height: 40px;"></div>
                            <div v-else class="bili-user-avatar">
                                <img :src=$store.state.constant.base_url+$store.state.userInfo.avatar style="width: 40px;height: 40px;" alt="">
                            </div>
                        </div>
                        <div class="reply-box-wrap">
                            <textarea class="reply-box-textarea" placeholder="发一条友善的评论" v-model="comment"></textarea>                       
                            <div class="no-login-mask" v-if="!$store.state.isLogin">
                                <span class="no-login-span">请先</span>
                                <span class="no-login-btn" @click="$store.commit('changeLoginView',true)">登录</span>
                                <span class="no-login-span">后发表评论 (・ω・)</span>
                            </div>
                        </div>
                        <Button type="primary" :class="[$store.state.isLogin?'reply-box-send':'no-login-reply-box-send']" @click="submitComment">发布</Button>
                    </div>
                    <div class="reply-list">
                        <div class="root-reply-item" v-for="item in commentList" :key="item.id">
                            <div class="root-reply-container">
                                <div class="root-reply-avatar">
                                    <div class="bili-avatar">
                                        <img @click="$store.commit('goUser',item.user_id)" style="width: 40px;height: 40px;" :src=$store.state.constant.base_url+item.avatar alt="">
                                    </div>
                                </div>
                                <div class="content-wrap">
                                    <div class="user-info">
                                        <div class="user-name" @click="$store.commit('goUser',item.user_id)">{{ item.user_name }}</div>
                                    </div>
                                    <div class="root-reply">{{ item.talk }}</div>
                                    <div class="reply-info">{{item.created_at}}</div>
                                </div>
                            </div>
                            <div class="bottom-line"></div>
                        </div>
                        <div class="reply-end">没有更多评论</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="right-container">
            <div class="up-info">
                <div class="u-face">
                    <img class="bili-avatar" style="width: 48px;height: 48px;" :src=$store.state.constant.base_url+detailList.avatar>
                </div>
                <div class="up-info-right">
                    <div class="name">
                        <span @click="$store.commit('goUser',detailList.up)">{{ detailList.nickname }}</span> 
                        <div class="up-info-right-message blue"><Icon type="md-mail" size="15"/>发消息</div>
                    </div>
                    <div class="desc">{{ detailList.upinrtoduction }}</div>
                    <div class="btn-panel">
                        <Button class="charge">为TA充电</Button>
                        <Button type="primary" class="follow">+关注 {{ detailList.followsChange }}</Button>
                    </div>
                </div>
            </div>
            <div class="rec-list">
                <div class="video-page-card" v-for="item in recommendList">
                    <div class="pic-box" @click="$store.commit('goDetail',item.id)"><img width="141" height="80" :src=$store.state.constant.base_url+item.img alt=""></div>
                    <div class="info">
                        <div class="title" @click="$store.commit('goDetail',item.id)"><a href="javascript:void(0);">{{ item.title }}</a></div>
                        <div class="desc blue" style="cursor: pointer;" @click="$store.commit('goUser',item.up)"><Icon type="ios-contact" size="14"/>{{ item.nickname }}</div>
                        <div class="desc" style="cursor: default;">
                            <Icon type="ios-arrow-dropright" size="14"/> {{ item.viewsChange }}  
                            <Icon type="ios-barcode-outline" size="14"/> {{ item.commentCount }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import common from '../common.js' 
    import LogReg from './LogReg.vue'

    export default{
        name:'Detail',
        components:{
            LogReg
        },
        data(){
            return{
                detailList:[],
                commentList:[],
                recommendList:[],
                isLike:false,
                isCoin:false,
                isStar:false,
                isClose:true,
                comment:'',
                closeMsg:'展开更多',
                showClose:false
            }
        },
        methods:{
            async getComment(){
                let res
                // 获取评论数
                res=await this.$api.get('getCommentByvideo/'+this.$route.params.id)
                this.detailList.commentsChange=common.numChange(res.data.result.count)
                console.log(res.data.result.count);
                //获取评论
                this.commentList=res.data.result.rows
                for(let ele of this.commentList){
                    ele.created_at=this.$moment(ele.created_at).format('YYYY-MM-DD HH:MM')
                    res=await this.$api.get('getUsers/'+ele.user_id)
                    ele.user_name=res.data.nickname
                    ele.avatar=res.data.avatar
                }                 
            },

            async getRecommend(){
                let res
                res=await this.$api.get('getVideo',{limit:10})
                this.recommendList=res.data
                //删除自己本身
                let num=this.recommendList.findIndex(item=>item.id==this.$route.params.id)
                this.recommendList.splice(num,1)
            },

            async getDetail(){
                let res
                //浏览量加一
                this.$api.post('users/addView',{id:this.$route.params.id})
                //获取视频详细信息
                res=await this.$api.get('getDetail/'+this.$route.params.id)
                this.detailList=res.data              
                //用户是否点赞
                if(this.$store.state.isLogin){
                    res=await this.$api.get('getUsers/'+this.$store.state.userInfo.id)
                    if(!res.data.like){

                    }else{
                        let arrLike=res.data.like.split(',')
                        if(arrLike.includes(this.$route.params.id)){
                            this.isLike=true
                        }
                    }
                }
                //获取评论
                this.getComment() 
                //获取推荐视频
                this.getRecommend()               
            },
            async changeLike(){
                let res
                //更新视频数据库
                res=await this.$api.post('users/changeLike',{id:this.$route.params.id,isAdd:!this.isLike})
                if(res.code==401){
                    this.$store.commit('changeLoginView',true)
                }else{
                    this.isLike=!this.isLike
                    //更新用户数据库
                    res=await this.$api.get('getUsers/'+this.$store.state.userInfo.id)
                    let arrLike=res.data.like.split(',')
                    console.log(arrLike);
                    if(this.isLike){
                        arrLike.push(this.$route.params.id)
                        this.detailList.likes++
                        this.detailList.likesChange=common.numChange(this.detailList.likes)
                    }else{
                        let num=arrLike.findIndex(item=>item==this.$route.params.id)
                        arrLike.splice(num,1)
                        this.detailList.likes--
                        this.detailList.likesChange=common.numChange(this.detailList.likes)
                    }
                    arrLike=arrLike.join(',')
                    console.log(arrLike);
                    res=await this.$api.post('users/changeUserLike',{id:this.$store.state.userInfo.id,arrLike:arrLike})
                }
            },

            submitComment(){
                if(this.$store.state.isLogin){
                    if(!this.comment){
                        alert('内容不能为空')
                    }else{
                        this.$api.post('users/addComment',{video_id:this.$route.params.id,user_id:this.$store.state.userInfo.id,talk:this.comment})
                        this.comment=''
                        this.getComment()
                    }
                }else{
                    this.$store.commit('changeLoginView',true)
                }
            },
            changeClose(){
                this.isClose=!this.isClose
                if(this.isClose){
                    this.closeMsg='展开更多'
                }else{
                    this.closeMsg='收起'
                }
            },
            valueClose(){
                // let height=parseFloat(window.getComputedStyle(this.$refs.icontainer).height)
                let height=this.$refs.icontainer.scrollHeight
                // console.log(height);
                if(height>92){
                    this.showClose=true
                }else{
                    this.showClose=false
                }
            }
        },
        created(){
            this.$store.commit('changeLogin')
            this.$store.commit('getUser')
            this.getDetail()      
        },
        updated(){
            this.valueClose()
        }
    }

</script>

<style>
    .video-container{
        max-width: 2540px;
        min-width: 1080px;
        margin: 0 auto;
        padding: 0 10px;
        display: flex;
        justify-content: center;
        box-sizing: content-box;
        position: relative;
        top:70px;
    }

    .left-container{
        width: 668px;
    }

    .right-container{
        width: 350px;
        flex: none;
        margin-left: 30px;
        position: relative;
    }

    /* --------------------------------左侧------------------------------- */

    .viewbox-report{
        height: 86px;
        padding-top: 20px;
        box-sizing: border-box;
    }

    .video-title{
        line-height: 28px;
        font-size: 20px;
        color: black;
        font-weight: 500;
        margin-bottom: 6px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .video-data{
        font-size: 13px;
        color: #9499A0;
        display: flex;
        align-items: center;
        height: 24px;
        line-height: 24px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        overflow: hidden;
        box-sizing: border-box;

    }

    .item{
        flex-shrink: 0;
        margin-right: 12px;
        display: inline-flex;
        align-items: center;
        overflow: hidden;
        margin-left: 3px;
    }

    .arc_toolbar_report{
        box-sizing: content-box;
        padding-top: 16px;
        padding-bottom: 12px;
        height: 28px;
        line-height: 28px;
        border-bottom: 1px solid #E3E5E7;
    }

    .toolbar-left{
        float: left;
        position: relative;
        user-select: none;
        font-size: 13px;
        color: #61666D;
        font-weight: 500;
        display: flex;
        align-items: center;
        height: 100%;
    }

    .toolbar-span{
        width: 92px;
        margin-right: 8px;
        cursor: pointer;
        white-space: nowrap;
        position: relative;
        display: inline-flex;
    }

    .blue{
        transition: color .2s ease;
    }

    .blue:hover{
        color: rgb(0,174,236);
    }

    .choose{
        color: rgb(0,174,236);
    }

    .none-choose{
        color: rgb(97,102,109);
    }

    .toolbar-right{
        position: relative;
        float: right;
        display: flex;
        align-items: center;
        color: #61666D;
        height: 100%;
        font-size: 13px;
    }

    .desc-info-text {
        white-space: pre-line;
        word-break: break-all;
        font-size: 15px;
        color: #18191C;
        letter-spacing: 0;
        line-height: 24px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .introduction-container{
        border-bottom: 1px solid #E3E5E7;
    }

    .introduction-close{
        height: 92px;
        overflow: hidden;
    }

    .introduction-open{
        height: none;
    }

    .b-img{
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .reply-header{
        height: 30px;
        line-height: 30px;
        margin-bottom: 10px;
    }

    .nav-title-text{
        font-weight: 500;
        font-size: 20px;
        color: black;
    }

    .total-reply{
        font-size: 13px;
        margin-left: 5px;
    }

    .main-reply-box{
        display: flex;
        height: 50px;
    }

    .reply-box-avatar{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 50px;
    }

    .bili-avatar{
        display: block;
        position: relative;
        background-image: url();
        background-size: cover;
        border-radius: 50%;
    }

    .bili-user-avatar{
        display: block;
        position: relative;
        background-size: cover;
        /* background-color: transparent; */
        border-radius: 50%;
        overflow: hidden;
        height: 40px;
        width: 40px;
    }

    .reply-box-wrap{
        position: relative;
        flex: 1;
    }

    .reply-box-textarea{
        width: 100%;
        height: 100%;
        padding: 5px 10px;
        border: 1px solid var(--Ga1);
        border-radius: 6px;
        background-color: rgb(241,242,243);
        font-family: inherit;
        line-height: 38px;
        color: black;
        resize: none;
        outline: none;
    }

    .reply-box-send{
        display: flex;
        margin-left: 10px;
        height: 100% !important;
        background-color: rgb(127,214,245) !important;
        border: 0 !important;
    }

    .reply-box-send:hover{
        background-color:rgb(0,174,236) !important;
    }

    .no-login-reply-box-send{
        display: flex;
        margin-left: 10px;
        height: 100% !important;
        background-color: rgb(241,242,243) !important;
        color: rgb(148,153,160) !important;
        border: 0 !important;
        cursor: default !important;
    }

    .no-login-mask{
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        border-radius: 6px;
        font-size: 12px;
        background-color: rgb(241,242,243);
        cursor: pointer;
    }

    .no-login-span{
        padding-left: 5px;
        padding-right: 5px;
    }

    /* .ivu-icon{
        line-height: 28px !important;
    } */

    .no-login-btn{
        padding: 4px 9px;
        border-radius: 4px;
        color:white;
        background: rgb(0,174,236);
    }

    .no-login-btn:hover{
        background-color: rgb(64,197,241);
    }

    .reply-list{
        margin-top: 14px;
        padding-bottom: 100px;
    }

    .reply-end{
        margin-top: 20px;
        font-size: 13px;
        color: rgb(148,153,160);
        text-align: center;
        cursor: default;
    }

    /* --------------------------------右侧------------------------------- */
    .up-info{
        padding-top: 20px;
        min-height: 58px;
        width: 350px;
        margin: 0 0 18px 0;
        display: flex;
        align-items: center;
    }

    .u-face{
        align-self: flex-start;
        width: 48px;
        height: 48px;
        position: relative;
        flex-shrink: 0;
    }

    .up-info-right{
        margin-left: 12px;
        flex: 1;
        overflow: auto;
    }

    .name{
        color: #FB7299;
        height: 22px;
        line-height: 22px;
        font-size: 15px;
        display: flex;
        align-items: center;
        font-weight: 500;
        cursor: pointer;
    }

    .up-info-right-message{
        margin-left: 10px;
        font-size: 13px;
        color: rgb(97,102,109);
    }


    .desc{
        margin: 3px 0 10px 0;
        font-size: 13px;
        line-height: 16px;
        height: 16px;
        color: #9499A0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .btn-pannel{
        clear: both;
        margin-top: 5px;
        white-space: nowrap;
        width: 290px;
    }

    .charge{
        margin-right: 12px;
        width: 109px;
        color: #FF6699 !important;
        border: 1px solid #FF6699 !important;
        position: relative;
    }

    .charge:hover{
        background-color: rgb(255,236,241) !important;
    }

    .follow{
        width: 150px;
        height: 30px;
        background: rgb(0,174,236) !important;
        align-items: center;
        justify-content: center;
    }

    .follow:hover{
        background-color: rgb(0,184,246) !important;
    }

    .rec-list{
        margin-top: 18px;
        width: 350px;
    }

    .video-page-card{
        display: flex;
        margin-bottom: 12px;
    }

    .pic-box{
        position: relative;
        width: 141px;
        height: 80px;
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
    }

    .info{
        flex:1;
        padding-left: 10px;
    }

    .info .title{
        width: 199px;
        height: 38px;
        text-overflow: ellipsis;
        display:-webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient:vertical;
        overflow: hidden;
    }

    .info .title a{
        font-weight: 500 !important;
    }

    .info .desc{
        margin-bottom: 0;
    }

    .toolbar-right .ivu-icon{
        line-height: 30px !important;
    }

    .root-reply-container{
        padding: 22px 0 0 80px;
    }

    .root-reply-item{
        position: relative;
    }

    .root-reply-avatar{
        display: flex;
        justify-content: center;
        position: absolute;
        left: 0px;
        width: 80px;
        cursor: pointer;
    }

    .root-reply-avatar .bili-avatar{
        width: 40px;
        height: 40px;
        overflow: hidden;
    }

    .content-wrap{
        position: relative;
    }

    .user-info{
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        font-size: 13px;
    }

    .user-name{
        font-weight: 500;
        margin-right: 5px;
        color: rgb(251,114,153);
        cursor: pointer;
    }

    .root-reply{
        font-size: 15px;
        line-height: 24px;
        padding: 2px 0;
        color: black;
    }

    .reply-info{
        margin-top: 2px;
        font-size: 13px;
        line-height: 24px;
        color:rgb(148,153,160)
    }

    .bottom-line{
        margin-left: 80px;
        border-bottom: 1px solid #ccc;
        margin-top: 14px;
    }

    video{
        width: 100%;
        object-fit: cover;
    }
</style>